import React, {Component} from 'react';

export default class Count extends Component {
	state = {sum: 0};

	// 普通加
	add = () => {
		const {value} = this.selectNumber;
		const {sum} = this.state;
		this.setState({sum: sum + value * 1});
	};

	// 普通减
	reduce = () => {
		const {value} = this.selectNumber;
		const {sum} = this.state;
		this.setState({sum: sum - value * 1});
	};

	// 奇数添加
	oddNumberAdd = () => {
		const {sum} = this.state;
		if (sum % 2 !== 0) {
			this.setState({sum: sum + 1});
		}
	};

  // 异步添加
	asynReduce = () => {
		const {sum} = this.state;
    setTimeout(()=>{
      this.setState({sum: sum + 1});
    },500)
	};

	render() {
		return (
			<div>
				<h1>当前总数:{this.state.sum}</h1>
				<div>
					<select ref={c => (this.selectNumber = c)}>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
					</select>
					<button onClick={this.add}>+</button>
					<button onClick={this.reduce}>-</button>
					<button onClick={this.oddNumberAdd}>奇数添加</button>
					<button onClick={this.asynReduce}>异步添加</button>
				</div>
			</div>
		);
	}
}
